<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Single | DarkWhite</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/prettyPhoto.css" rel="stylesheet">
	<link href="css/item_hover.css" rel="stylesheet">
    <link href="css/animate.min.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <link href="fonts/stylesheet.css" rel="stylesheet">
    <link href="css/responsive.css" rel="stylesheet">
    <link rel="stylesheet" href="css/single.css">
    
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->       
    <link rel="shortcut icon" href="images/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="images/ico/apple-touch-icon-57-precomposed.png">
</head><!--/head-->
<body>
    <header id="main_header">
   
       
            
    </header><!--/header-->
    <div id="single">
    </div>
      <!-- END section -->
    

      <section id="bottom">
        <div id="bottom2" class="container wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
           
        </div>
    </section>

    <footer id="footer" class="midnight-blue">
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                    &copy; 2019 All Rights Reserved.
                </div>
                <div class="col-sm-6">
                    <ul class="pull-right">
                        <li><a href="index.html">首页</a></li>
                        <li><a href="about-us.html">关于我们</a></li>
                        <li><a href="404.html">常见问题</a></li>
                        <li><a href="contact-us.html">联系我们</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>
    

    <!-- 弹出式对话框：表示注册成功 -->
    <div id="modalSubmitSucc" class="modal fade">   <!--半透明遮罩-->
        <div class="modal-dialog modal-sm">   <!--对话框尺寸、位置-->
          <div class="modal-content">   <!--边框、倒角、背景色-->
            <!-- 头部 -->
            <div class="modal-header">
              <h4 class="modal-title">添加成功</h4>
            </div>
            <!-- 主体 -->
            <div class="modal-body">
              <p>已成功添加至购物车！</p>
            </div>
            <!-- 尾部 -->
            <div class="modal-footer">
              <button class="btn btn-info" type="button" data-dismiss="modal">继续购物</button>
              <button id="backcart" class="btn btn-success" type="button" data-dismiss="modal">查看购物车</a> </button>
            </div>
          </div>  
        </div>
      </div>

    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.prettyPhoto.js"></script>
    <script src="js/jquery.isotope.min.js"></script>
    <script src="js/main.js"></script>
    <script src="js/wow.min.js"></script>
    <script>
    $(window).load(function(){
        let lid = decodeURI(location.href).split('=')[1];
        $.ajax({
            method:'GET',
            url:'http://127.0.0.1:5050/single?lid='+lid,
            data:`lid=${lid}`,
            success:function(data){
                console.log('异步请求成功')
                console.log(data[0].lname)
                let html = ''
                html +=`
                <section class="site-hero overlay" data-stellar-background-ratio="0.5" style="background-image: url(${data[0].img});">
                <div class="container" >
          <div class="row align-items-center site-hero-inner justify-content-center">
            <div class="col-md-12" style="margin-top:100px">
              <div class="mb-5 element-animate">
                <div class="row align-items-center">
                  <div class="col-md-7">
                    <h1 class="mb-0">${data[0].lname}</h1>
                    <p>By ${data[0].teacher_name}</p>
                    <p class="lead mb-4">${data[0].details}</p>
                    <h2 style="color:#fff">￥${data[0].price}</h2>
                    <p><button id="btnSend" class="btn btn-outline-white">添加到购物车</button></p>
                    
                  </div>
                  <div class="col-md-4">
                    <img src="${data[0].img}" height="300px" width="300px" alt="Image placeholder" class="img-fluid">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
    </section>
                `
                $('#single').html(html)
                $('#btnSend').click(function(){
        // let uid=1
        let lesson_id=data[0].lid
        let teacher_id=data[0].teacher_id
        let price=data[0].price
    let uname=''
    let isLogin=false
    $.ajax({
        method:'GET',
        url:'http://127.0.0.1:5050/user/sessiondata',
        xhrFields: {
            withCredentials: true
        },
        crossDomain: true,
        success:function(data)
        {
            
            uname=data.uname;
            isLogin=data.isLogin;
            if(isLogin)
            {
               
            $.ajax({
            method:'POST',
            url:'http://127.0.0.1:5050/single',
            data:`uname=${uname}&lesson_id=${lesson_id}&teacher_id=${teacher_id}&price=${price}`,
            success:function(data){
                console.log('yibuqingqiuchenggong')
                if(data.code==200){
                    $('#modalSubmitSucc').modal()

                    $('#backcart').click(function(){
                      window.location.href ='cart.html'
                    })
                }
            }
          })
            
                
            
                
            }
            else
            {
                $('#serverErrMsg').html("请先登录后加入购物车！")
                $('#modalSubmitErr').modal()
            }
        
        },
       
        error: function(xhr, err){
            console.log('异步session失败：')
            console.log(xhr)
            console.log(err)
          }
          
    
    })




       
    })
            }
        })
    })

   
    </script>
</body>
<div id="modalSubmitErr" class="modal fade">   <!--半透明遮罩-->
  <div class="modal-dialog modal-sm">   <!--对话框尺寸、位置-->
    <div class="modal-content">   <!--边框、倒角、背景色-->
      <!-- 头部 -->
      <div class="modal-header">
        <h4 class="modal-title">未登录</h4>
      </div>
      <!-- 主体 -->
      <div class="modal-body">
          <p><b>添加购物车失败</b></p>
          <p>服务器返回消息：<span id="serverErrMsg"></span></p>
        
      </div>
      <!-- 尾部 -->
      <div class="modal-footer">
        <button class="btn btn-info" type="button" data-dismiss="modal">确定</button>
      </div>
    </div>  
  </div>
</div>
</html>